<template>
	<Popup
		class="login-number"
		title="登录/注册"
		btnText="注册/登录"
		padding="44px 30px 60px"
		@clickBtn="onclickLogin"
		@close="$emit('close')"
	>
		<div
			style="margin: 62px 0 36px;"
			class="input"
		>
			<Input
				placeholder="手机号/邮箱"
				color="#003e34"
				v-model="number"
			/>
		</div>
		<div class="input">
			<Input
				type="password"
				placeholder="密码"
				v-model="password"
			/>
		</div>
		<div class="forget">
			忘记密码?
		</div>
	</Popup>
</template>

<script>
import { userLogin } from '@/api/user'
import { setToken } from '@/utils/user'
export default {
  data() {
    return {
      number: '',
      password: ''
    }
  },
  methods: {
    /**
     * 点击登录, 查找数据库中同账号数据，没有则注册，有则登录
     */
    onclickLogin() {
      if (this.number && this.password) {
        const user = userLogin({
          number: this.number,
          password: this.password
        })

        setToken(user.number)
        this.$storeCommit('setUserInfo', user)

        if (user.role) {
          this.$pushTo('Home')
        } else {
          this.$emit('nextStep', user)
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.login-number {
  width: 500px;

  .input {
    width: 440px;
    padding: 0 50px;
    text-align: center;
  }

  .forget {
    margin-top: 13px;
    margin-right: 50px;
    font-size: 16px;
    color: $color1;
    text-align: right;
    cursor: pointer;
  }
}
</style>
